import 'package:flutter/material.dart';

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({super.key});

  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _formKey = GlobalKey<FormState>();
  final _phoneController = TextEditingController();
  final _codeController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();
  
  bool _isPhoneRegistration = true;
  bool _isPasswordVisible = false;
  bool _isConfirmPasswordVisible = false;
  bool _isAgreementChecked = true;
  bool _isCodeSent = false;
  int _countdown = 60;
  
  @override
  void dispose() {
    _phoneController.dispose();
    _codeController.dispose();
    _passwordController.dispose();
    _confirmPasswordController.dispose();
    super.dispose();
  }

  void _handleSendCode() {
    if (_phoneController.text.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请输入手机号')),
      );
      return;
    }
    
    if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(_phoneController.text)) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请输入有效的手机号')),
      );
      return;
    }
    
    setState(() {
      _isCodeSent = true;
      _countdown = 60;
    });
    
    // 开始倒计时
    _startCountdown();
    
    // TODO: 实际发送验证码逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('验证码已发送')),
    );
  }
  
  void _startCountdown() {
    Future.delayed(const Duration(seconds: 1), () {
      if (mounted && _countdown > 0) {
        setState(() {
          _countdown--;
        });
        _startCountdown();
      } else if (mounted) {
        setState(() {
          _isCodeSent = false;
        });
      }
    });
  }

  void _handleRegister() {
    if (!_formKey.currentState!.validate()) {
      return;
    }
    
    if (!_isAgreementChecked) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请同意用户协议和隐私政策')),
      );
      return;
    }
    
    if (_passwordController.text != _confirmPasswordController.text) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('两次输入的密码不一致')),
      );
      return;
    }
    
    // TODO: 实际注册逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('注册成功')),
    );
    
    // 注册成功后返回登录页面
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Color(0xFF666666)),
          onPressed: () => Navigator.pop(context),
        ),
        title: const Text(
          '用户注册',
          style: TextStyle(
            fontFamily: 'PingFang SC',
            fontSize: 18,
            fontWeight: FontWeight.w700,
            color: Color(0xFF1a1a1a),
          ),
        ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            
            // 注册方式选择
            const Text(
              '选择注册方式',
              style: TextStyle(
                fontFamily: 'PingFang SC',
                fontSize: 16,
                fontWeight: FontWeight.w700,
                color: Color(0xFF1a1a1a),
              ),
            ),
            
            const SizedBox(height: 20),
            
            // 手机号注册选项
            GestureDetector(
              onTap: () {
                setState(() {
                  _isPhoneRegistration = true;
                });
              },
              child: Container(
                width: double.infinity,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: _isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFFD9D9D9),
                    width: _isPhoneRegistration ? 2 : 1,
                  ),
                ),
                child: Row(
                  children: [
                    const SizedBox(width: 20),
                    Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        color: _isPhoneRegistration ? const Color(0xFFE6F7FF) : const Color(0xFFF0F2F5),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: Icon(
                        Icons.phone_android,
                        color: _isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFF666666),
                        size: 18,
                      ),
                    ),
                    const SizedBox(width: 20),
                    const Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '手机号注册',
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                              color: Color(0xFF1a1a1a),
                            ),
                          ),
                          Text(
                            '使用手机号快速注册账户',
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                              color: Color(0xFF6a6a6a),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 16,
                      height: 16,
                      decoration: BoxDecoration(
                        color: _isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFFD9D9D9),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: _isPhoneRegistration
                          ? const Icon(
                              Icons.circle,
                              color: Colors.white,
                              size: 8,
                            )
                          : null,
                    ),
                    const SizedBox(width: 20),
                  ],
                ),
              ),
            ),
            
            const SizedBox(height: 20),
            
            // 邮箱注册选项
            GestureDetector(
              onTap: () {
                setState(() {
                  _isPhoneRegistration = false;
                });
              },
              child: Container(
                width: double.infinity,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: !_isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFFD9D9D9),
                    width: !_isPhoneRegistration ? 2 : 1,
                  ),
                ),
                child: Row(
                  children: [
                    const SizedBox(width: 20),
                    Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        color: !_isPhoneRegistration ? const Color(0xFFE6F7FF) : const Color(0xFFF0F2F5),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: Icon(
                        Icons.email_outlined,
                        color: !_isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFF666666),
                        size: 18,
                      ),
                    ),
                    const SizedBox(width: 20),
                    const Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '邮箱注册',
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                              color: Color(0xFF1a1a1a),
                            ),
                          ),
                          Text(
                            '使用邮箱地址注册账户',
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                              color: Color(0xFF6a6a6a),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 16,
                      height: 16,
                      decoration: BoxDecoration(
                        color: !_isPhoneRegistration ? const Color(0xFF1890FF) : const Color(0xFFD9D9D9),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: !_isPhoneRegistration
                          ? const Icon(
                              Icons.circle,
                              color: Colors.white,
                              size: 8,
                            )
                          : null,
                    ),
                    const SizedBox(width: 20),
                  ],
                ),
              ),
            ),
            
            const SizedBox(height: 30),
            
            // 注册表单
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.08),
                    blurRadius: 20,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Form(
                key: _formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 手机号输入
                    const Text(
                      '手机号',
                      style: TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF1a1a1a),
                      ),
                    ),
                    const SizedBox(height: 10),
                    TextFormField(
                      controller: _phoneController,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        hintText: '请输入11位手机号',
                        hintStyle: const TextStyle(
                          fontFamily: 'PingFang SC',
                          fontSize: 14,
                          color: Color(0xFF8a8a8a),
                        ),
                        filled: true,
                        fillColor: const Color(0xFFF8F9FA),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFF1890FF)),
                        ),
                        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请输入手机号';
                        }
                        if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(value)) {
                          return '请输入有效的手机号';
                        }
                        return null;
                      },
                    ),
                    
                    const SizedBox(height: 20),
                    
                    // 验证码输入
                    const Text(
                      '验证码',
                      style: TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF1a1a1a),
                      ),
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        Expanded(
                          flex: 2,
                          child: TextFormField(
                            controller: _codeController,
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                              hintText: '请输入验证码',
                              hintStyle: const TextStyle(
                                fontFamily: 'PingFang SC',
                                fontSize: 14,
                                color: Color(0xFF8a8a8a),
                              ),
                              filled: true,
                              fillColor: const Color(0xFFF8F9FA),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                              ),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(color: Color(0xFF1890FF)),
                              ),
                              contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入验证码';
                              }
                              return null;
                            },
                          ),
                        ),
                        const SizedBox(width: 15),
                        SizedBox(
                          width: 80,
                          height: 44,
                          child: ElevatedButton(
                            onPressed: _isCodeSent ? null : _handleSendCode,
                            style: ElevatedButton.styleFrom(
                              backgroundColor: const Color(0xFF1890FF),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              elevation: 0,
                            ),
                            child: Text(
                              _isCodeSent ? '${_countdown}s' : '获取验证码',
                              style: const TextStyle(
                                fontFamily: 'PingFang SC',
                                fontSize: 12,
                                fontWeight: FontWeight.w600,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    
                    const SizedBox(height: 20),
                    
                    // 设置密码
                    const Text(
                      '设置密码',
                      style: TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF1a1a1a),
                      ),
                    ),
                    const SizedBox(height: 10),
                    TextFormField(
                      controller: _passwordController,
                      obscureText: !_isPasswordVisible,
                      decoration: InputDecoration(
                        hintText: '请设置6-20位登录密码',
                        hintStyle: const TextStyle(
                          fontFamily: 'PingFang SC',
                          fontSize: 14,
                          color: Color(0xFF8a8a8a),
                        ),
                        filled: true,
                        fillColor: const Color(0xFFF8F9FA),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFF1890FF)),
                        ),
                        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                        suffixIcon: IconButton(
                          icon: Icon(
                            _isPasswordVisible ? Icons.visibility : Icons.visibility_off,
                            color: const Color(0xFF86909C),
                          ),
                          onPressed: () {
                            setState(() {
                              _isPasswordVisible = !_isPasswordVisible;
                            });
                          },
                        ),
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请输入密码';
                        }
                        if (value.length < 6 || value.length > 20) {
                          return '密码长度应为6-20位';
                        }
                        return null;
                      },
                    ),
                    
                    const SizedBox(height: 20),
                    
                    // 确认密码
                    const Text(
                      '确认密码',
                      style: TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF1a1a1a),
                      ),
                    ),
                    const SizedBox(height: 10),
                    TextFormField(
                      controller: _confirmPasswordController,
                      obscureText: !_isConfirmPasswordVisible,
                      decoration: InputDecoration(
                        hintText: '请再次输入密码',
                        hintStyle: const TextStyle(
                          fontFamily: 'PingFang SC',
                          fontSize: 14,
                          color: Color(0xFF8a8a8a),
                        ),
                        filled: true,
                        fillColor: const Color(0xFFF8F9FA),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFFE6E8EB)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Color(0xFF1890FF)),
                        ),
                        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                        suffixIcon: IconButton(
                          icon: Icon(
                            _isConfirmPasswordVisible ? Icons.visibility : Icons.visibility_off,
                            color: const Color(0xFF86909C),
                          ),
                          onPressed: () {
                            setState(() {
                              _isConfirmPasswordVisible = !_isConfirmPasswordVisible;
                            });
                          },
                        ),
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请确认密码';
                        }
                        if (value != _passwordController.text) {
                          return '两次输入的密码不一致';
                        }
                        return null;
                      },
                    ),
                  ],
                ),
              ),
            ),
            
            const SizedBox(height: 20),
            
            // 协议勾选
            Row(
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      _isAgreementChecked = !_isAgreementChecked;
                    });
                  },
                  child: Container(
                    width: 18,
                    height: 18,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(3),
                      border: Border.all(
                        color: _isAgreementChecked ? const Color(0xFF1890FF) : const Color(0xFFD9D9D9),
                        width: 2,
                      ),
                    ),
                    child: _isAgreementChecked
                        ? const Icon(
                            Icons.check,
                            color: Color(0xFF1890FF),
                            size: 12,
                          )
                        : null,
                  ),
                ),
                const SizedBox(width: 12),
                const Text(
                  '我已阅读并同意',
                  style: TextStyle(
                    fontFamily: 'PingFang SC',
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: Color(0xFF6a6a6a),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    // TODO: 跳转到用户协议页面
                  },
                  child: const Text(
                    '《用户协议》',
                    style: TextStyle(
                      fontFamily: 'PingFang SC',
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      color: Color(0xFF1890FF),
                    ),
                  ),
                ),
                const Text(
                  '和',
                  style: TextStyle(
                    fontFamily: 'PingFang SC',
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: Color(0xFF6a6a6a),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    // TODO: 跳转到隐私政策页面
                  },
                  child: const Text(
                    '《隐私政策》',
                    style: TextStyle(
                      fontFamily: 'PingFang SC',
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      color: Color(0xFF1890FF),
                    ),
                  ),
                ),
              ],
            ),
            
            const SizedBox(height: 20),
            
            // 注册按钮
            SizedBox(
              width: double.infinity,
              height: 48,
              child: ElevatedButton(
                onPressed: _handleRegister,
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF1890FF),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(24),
                  ),
                  elevation: 0,
                ),
                child: const Text(
                  '立即注册',
                  style: TextStyle(
                    fontFamily: 'PingFang SC',
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            
            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}